<%--
  Created by IntelliJ IDEA.
  User: 欧阳佳新
  Date: 2025/1/2
  Time: 00:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>结算页面</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      background-color: #f8f9fa;
      font-family: Arial, Helvetica, sans-serif;
    }
    .checkout-container {
      max-width: 1200px;
      margin: 20px auto;
      display: flex;
      flex-wrap: nowrap;
      gap: 20px;
    }
    .checkout-items {
      flex: 1 1 auto;
      max-height: 80vh;
      overflow-y: auto;
      padding-right: 10px;
    }
    .checkout-item {
      border-bottom: 1px solid #ddd;
      padding: 15px 0;
    }
    .checkout-item img {
      max-width: 100px;
      cursor: pointer;
    }
    .checkout-item-title {
      font-size: 16px;
      font-weight: bold;
    }
    .checkout-item-spec {
      color: #6c757d;
    }
    .checkout-summary {
      flex: 0 0 300px;
      background-color: white;
      border: 1px solid #ddd;
      padding: 15px;
      border-radius: 5px;
      position: sticky;
      top: 20px;
      height: fit-content;
    }
    .btn-checkout {
      background-color: orange;
      color: white;
      font-size: 18px;
      width: 100%;
    }
    .btn-checkout:hover {
      background-color: #e69500;
    }
    .btn-back {
      background-color: #6c757d;
      color: white;
      font-size: 16px;
      width: 100%;
      margin-top: 10px;
    }
    .btn-back:hover {
      background-color: #5a6268;
    }
  </style>
</head>
<body>
<%--<nav class="navbar navbar-expand-lg navbar-light bg-light">--%>
<%--  <div class="container-fluid">--%>
<%--    <a class="navbar-brand" href="#">电商平台</a>--%>
<%--    <div class="collapse navbar-collapse">--%>
<%--      <ul class="navbar-nav me-auto">--%>
<%--        <li class="nav-item"><a class="nav-link" href="#">首页</a></li>--%>
<%--        <li class="nav-item"><a class="nav-link" href="#">我的订单</a></li>--%>
<%--        <li class="nav-item"><a class="nav-link" href="#">收藏夹</a></li>--%>
<%--        <li class="nav-item"><a class="nav-link" href="#">商品分类</a></li>--%>
<%--        <li class="nav-item"><a class="nav-link" href="#">客户服务</a></li>--%>
<%--      </ul>--%>
<%--      <ul class="navbar-nav">--%>
<%--        <li class="nav-item"><a class="nav-link" href="#">登录 / 注册</a></li>--%>
<%--        <li class="nav-item"><a class="nav-link" href="#">购物车 (3)</a></li>--%>
<%--      </ul>--%>
<%--    </div>--%>
<%--  </div>--%>
<%--</nav>--%>

<div class="checkout-container">
  <!-- 收货地址部分 -->
  <div class="checkout-summary">
    <h5>收货信息</h5>
    <c:if test="${not empty address}">
      <p><strong>姓名：</strong>${address.peiceName}</p>
      <p><strong>电话：</strong>${address.phone}</p>
      <p><strong>地址：</strong>${address.province} ${address.district} ${address.detailAddress}</p>
    </c:if>
    <c:if test="${empty address}">
      <p>未找到收货地址，请添加收货地址。</p>
    </c:if>
    <!-- 修改按钮 -->
    <button class="btn btn-checkout" data-bs-toggle="modal" data-bs-target="#paymentModal">提交订单</button>
    <button class="btn btn-back" onclick="location.href='/CartServlet'">返回购物车</button>
  </div>

  <!-- 中间部分：商品列表 -->
  <div class="checkout-items">
    <c:if test="${not empty cartItems}">
      <c:forEach var="item" items="${cartItems}">
        <div class="checkout-item d-flex align-items-start mb-3 border-bottom pb-3">
          <div class="me-3">
            <img src="${item.image}" alt="${item.productName}" style="width: 100px; height: 100px; object-fit: cover;">
          </div>
          <div class="flex-grow-1">
            <p class="checkout-item-title fw-bold">${item.productName}</p>
            <p class="checkout-item-spec">${item.productDescription}</p>
            <p class="checkout-item-price text-danger">单价：¥${item.price}</p>
            <p>数量：${item.quantity}</p>
            <p>小计：¥${item.price * item.quantity}</p>
          </div>
        </div>
      </c:forEach>
    </c:if>
    <c:if test="${empty cartItems}">
      <p class="text-center">您的购物车为空。</p>
    </c:if>
  </div>
</div>

<!-- 支付确认模态框 -->
<div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="paymentModalLabel">确认支付</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <p>订单金额：<span class="text-danger fw-bold">¥${totalPrice}</span></p>
        <p>请选择支付方式：</p>
        <select id="paymentMethod" class="form-select">
          <option value="alipay">支付宝</option>
          <option value="wechat">微信支付</option>
          <option value="card">信用卡/借记卡</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="submitOrder()">确认支付</button>
      </div>
    </div>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  function editAddress() {
      alert("跳转到地址编辑页面。");
  }

  function submitOrder() {
      const params = new URLSearchParams();
      params.append('action', 'submitOrder');

      fetch('/OrderServlet', {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          body: params.toString()
      })
      .then(response => {
          if (response.ok) {
              alert("订单提交成功！");
              location.href = '/OrderServlet';
          } else {
              alert("订单提交失败，请重试！");
          }
      })
      .catch(error => {
          console.error(error);
          alert("网络错误，请稍后再试！");
      });
  }


</script>

</body>
</html>
